<template>
	<view style="margin-top: 20rpx;" class="cu-list menu-avatar">
		<view
			class="p-section cu-item"
			v-for="(pd, index) in list"
			:key="index"
			url="product"
			:class="modalName == 'move-box-' + index ? 'move-cur' : ''"
			@tap="goProduct(pd)"
			@touchstart="ListTouchStart"
			@touchmove="ListTouchMove"
			@touchend="ListTouchEnd"
			:data-target="'move-box-' + index"
		>
			<view class="imgItem"><image :src="pd.pictUrl" class="picItem" mode="aspectFit" lazy-load /></view>
			<view class="contentItem">
				<view class="titleItem">
					<text class="typeInfo">{{ pd.userType | shopType }}</text>
					{{ pd.title }}
				</view>
				<view class="shopItem">
					<icon-font type="shop" size="16" color="#aaaaaa"></icon-font>
					<text class="shopInfo">{{ pd.shopTitle }}</text>
				</view>
				<view class="juanItem">
					<view class="cu-capsule round" v-if="pd.couponAmount != null">
						<view class="cu-tag bg-gradual-pink"><text class="padding-lr-xs text-white">劵</text></view>
						<view class="cu-tag line-pink">{{ pd.couponAmount }} 元</view>
					</view>
				</view>
				<view class="priceItem">
					券后
					<text class="zkprice">￥{{ pd.zkFinalPrice }}</text>
					<text class="yprice">￥{{ pd.reservePrice }}</text>
				</view>
				<view class="btnItem">
					<view>月销 {{ pd.volume }}</view>
					<view class="btn">
						<view class="info">赚 ￥{{ pd.commissionAmount }}</view>
					</view>
				</view>
			</view>
			<view class="move" @tap.stop="">
				<view class="bg-yellow" @tap="goShare(pd)">分享</view>
				<view class="bg-red" @tap="deleteProduct(pd.id, index)">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			// 数据列表
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			modalName: null,
			listTouchStart: 0,
			listTouchDirection: null
		};
	},
	methods: {
		goProduct(pd) {
			uni.navigateTo({
				url: '../product/main?cnt=' + encodeURIComponent(JSON.stringify(pd))
			});
		},
		goShare(pd) {
			//跳转至分享页面
			uni.navigateTo({
				url: '../product/share?cnt=' + encodeURIComponent(JSON.stringify(pd))
			});
		},
		deleteProduct(id, index) {
			this.$emit('delProduct', id, index);
		},

		// ListTouch触摸开始
		ListTouchStart(e) {
			this.listTouchStart = e.touches[0].pageX;
		},
		// ListTouch计算方向
		ListTouchMove(e) {
			this.listTouchDirection = this.listTouchStart- e.touches[0].pageX > 100 ? 'left' : 'null';
		},
		// ListTouch计算滚动
		ListTouchEnd(e) {
			if (this.listTouchDirection == 'left') {
				this.modalName = e.currentTarget.dataset.target;
			} else {
				this.modalName = null;
			}
			this.listTouchDirection = null;
		}
	}
};
</script>

<style lang="scss">
.p-section {
	display: flex;
	position: relative;
	align-items: flex-start;
	border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	padding: 15rpx 15rpx;
	background-color: white;
	color: #000000;
	margin-bottom: 5rpx;
	font-size: 24rpx;
	.rmb {
		font-size: 18rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
	}
	.imgItem {
		display: flex;
		align-items: flex-start;
		.picItem {
			margin: 2rpx;
			width: 280rpx;
			height: 280rpx;
		}
	}
	.contentItem {
		margin: 2rpx;
		padding-left: 10rpx;
		.titleItem {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			font-weight: bold;
			.typeInfo {
				background-color: #fe7179;
				color: #ffffff;
				padding: 2rpx 10rpx;
				margin-right: 10rpx;
			}
		}
		.shopItem {
			display: flex;
			margin-top: 10rpx;
			font-size: 22rpx;
			.shopInfo {
				color: #aaaaaa;
				padding-left: 10rpx;
				padding-top: 5rpx;
			}
		}
		.juanItem {
			margin-top: 10rpx;
		}
		.priceItem {
			margin-top: 10rpx;
			color: #aaaaaa;
			.zkprice {
				padding-right: 15rpx;
				font-size: 32rpx;
				color: #ff0000;
			}
			.yprice {
				text-decoration: line-through;
			}
		}
		.btnItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;
			color: #aaaaaa;
			.btn {
				height: 60rpx;
				border-radius: 60px;
				overflow: hidden;
				box-shadow: 1px 2px 5px #d03032;
				background: linear-gradient(to right, #fe7179, #e83844);
				.info {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 200rpx;
					height: 100%;
					font-size: 28rpx;
					color: #fff;
					padding: 0 10rpx;
					border-radius: 0;
					background: transparent;
					font-weight: bold;
				}
			}
		}
	}
}
</style>
